<script setup>
import { ref } from 'vue';
import { gsap } from "gsap";

const list = ref([
    {
        title:'视频智能混剪',
        text:'零视频处理能力就能用的多模态AI智能剪辑应用，上传视频素材，一键生成多样化商业短视频。',
        img:'home_gj_s_01.png'
    },
    {
        title:'矩阵发布管理',
        text:'多平台一键发布，批量内容批量发布，轻松获取更多曝光，同城短视频霸屏，实现获客增长。',
        img:'home_gj_s_02.png'
    },
    {
        title:'多场景文本生成',
        text:'多种主流营销场景文案生成，包括短视频脚本、产品描述、信息流文案等，更多场景持续扩展中。',
        img:'home_gj_s_03.png'
    },
    {
        title:'AI智能拓客',
        text:'利用关键词查找精准客户并自动私信，评论自动回复，全网24小时自动开发客户。',
        img:'home_gj_s_04.png'
    }
])
const imgItem = ref([
        { id: 1, img: 'home_img_khal01.png', text:'餐饮行业' },
        { id: 2, img: 'home_img_khal02.png', text:'装修行业' },
        { id: 3, img: 'home_img_khal03.png', text:'房产行业' },
        { id: 4, img: 'home_img_khal04.png', text:'美容行业' },
        { id: 5, img: 'home_img_khal05.png', text:'汽车行业' },
        { id: 6, img: 'home_img_khal06.png', text:'保险行业' },
        { id: 7, img: 'home_img_khal07.png', text:'旅游行业' },
        { id: 8, img: 'home_img_khal08.png', text:'广告行业' },
        { id: 9, img: 'home_img_khal09.png', text:'教育行业' },
      ])

    const chooseList = ref([
        {id:1,title:'技术优势',text:'多年短视频研究行业经验，在底层数据处理、围绕矩阵获客系统研究，自主技术开发，不断迭代技术',img:'home_wme_img01.png'},
        {id:1,title:'服务优势',text:'完善的服务能力，专业的售后团队，保证用户体验',img:'home_wme_img02.png'},
        {id:1,title:'数据优势',text:'大数据分析各行各业的用户群体，制定专业的短视频获客方案，极大的提高了获客效率',img:'home_wme_img03.png'},
        {id:1,title:'运营优势',text:'深耕细分行业，解决方案更垂直无障碍加入，运营可视化，产出可控化',img:'home_wme_img04.png'},
    ])

const clickIndex = ref(0)
const listIndex = ref(0)
const moverSwipe = (index) => {
    clickIndex.value = index;
    gsap.to('.swipe-right', {
      duration: 0.1, // 动画持续时间，单位为秒
      autoAlpha: 0, // 透明度变为0，同时处理opacity和visibility
      ease: "power1.inOut", // 缓动函数，这里使用平滑的淡入淡出效果
      onComplete: () => {
      // 淡出动画完成后，更新页面数据
      listIndex.value = index;
      
      // 数据更新后，开始淡入动画
      gsap.to('.swipe-right', {
        duration: 0.5,
        autoAlpha: 1,
        ease: "power1.inOut"
      });
    }
    });
}

const caseMover = (i) => {
    document.querySelectorAll('.grid-item-text')
    .forEach((item,index) => {
        if(index == i){
            console.log(index);
            item.classList.add('g-animation')
        }
    })
}
const caseLeave = (i) => {
    console.log(i);
    document.querySelectorAll('.grid-item-text')
    .forEach((item,index) => {
        if(index == i){
            item.classList.remove('g-animation')
        }
    })
}

const chooseMover = (i) => {
    document.querySelectorAll('.choose-detail')
    .forEach((item,index) => {
        if(index == i){
            console.log(index);
            item.classList.add('choose-anima')
        }
    })
    document.querySelectorAll('.choose-item-img')
    .forEach((item,index) => {
        if(index == i){
            console.log(index);
            item.classList.add('choose-img')
        }
    })
}
const chooseLeave = (i) => {
    document.querySelectorAll('.choose-detail')
    .forEach((item,index) => {
        if(index == i){
            item.classList.remove('choose-anima')
        }
    })
    document.querySelectorAll('.choose-item-img')
    .forEach((item,index) => {
        if(index == i){
            item.classList.remove('choose-img')
        }
    })
}
</script>

<template>
<div class="page">
    <div class="top">
        <div class="row" style="margin: 0;">
          <div class="col left">
            <h3 class="top-h3">智能创作</h3>
            <p class="top-p">服务于企业内容生产营销全链路，提供视频混剪、矩阵发布、自动拓客等多款AI创作工具、万款爆款文案和爆款音乐素材、助力企业创作更多高品质视频，驱动业务增长</p>
            <div class="top-flex">
                <div class="top-flex-item">
                    <span class="top-flex-item-top">3000<span style="font-size: 18px;">+</span></span>
                    <span class="top-flex-item-bottom">服务企业</span>
                </div>
                <div class="top-flex-item">
                    <span class="top-flex-item-top">15.4亿<span style="font-size: 18px;">+</span></span>
                    <span class="top-flex-item-bottom">平台曝光量</span>
                </div>
                <div class="top-flex-item">
                    <span class="top-flex-item-top">309万<span style="font-size: 18px;">+</span></span>
                    <span class="top-flex-item-bottom">视频合成总量</span>
                </div>
            </div>
          </div>
          <div class="col right">
            <img class="col-right-img1" src="../assets/home_banner1.png" alt="">
            <img class="col-right-img2" src="../assets/home_banner2.png" alt="">
            <img class="col-right-img3" src="../assets/home_banner3.png" alt="">
          </div>
        </div>
        <div class="row" style="margin: 0;">
            <div class="col bottom">
                <div class="bottom-item">
                    <img class="bottom-item-img" src="../assets/home_icon_01.png" alt="">
                    <span>对行业有深度理解</span>
                </div>
                <div class="bottom-item">
                    <img class="bottom-item-img" src="../assets/home_icon_02.png" alt="">
                    <span>成熟的团队体系</span>
                </div>
                <div class="bottom-item">
                    <img class="bottom-item-img" src="../assets/home_icon_03.png" alt="">
                    <span>完整的行业业务流程</span>
                </div>
                <div class="bottom-item">
                    <img class="bottom-item-img" src="../assets/home_icon_04.png" alt="">
                    <span>庞大的线下资源</span>
                </div>
            </div>
          </div>
    </div>
    <div class="swipe">
        <div class="swipe-left">
            <div class="swipe-left-title">
                <img class="swipe-title-img" src="../assets/home_icon_05.png" alt="">
                <span>AI应用工具</span>
            </div>
            <div class="swipe-tabbar">
                <div :class="clickIndex==0?'tab-active':''" class="swipe-tab-item" @mouseenter="moverSwipe(0)">视频智能混剪</div>
                <div :class="clickIndex==1?'tab-active':''" class="swipe-tab-item" @mouseenter="moverSwipe(1)">矩阵发布管理</div>
                <div :class="clickIndex==2?'tab-active':''" class="swipe-tab-item" @mouseenter="moverSwipe(2)">多场景文本生成</div>
                <div :class="clickIndex==3?'tab-active':''" class="swipe-tab-item" @mouseenter="moverSwipe(3)">AI智能拓客</div>
            </div>
        </div>
        <div class="swipe-right">
            <h3 class="swipe-right-title">{{ list[listIndex].title }}</h3>
            <text class="swipe-right-text">{{ list[listIndex].text }}</text>
            <img class="swipe-right-img" :src="require('@/assets/' + list[listIndex].img)" alt="">
        </div>
    </div>
    <div class="inset-text">
        <text>全力帮助商家实现线上曝光倍增，</text>
        <text>与所有商家一起成长</text>
    </div>
    <div class="case">
        <div class="case-title">客户案例<div class="case-line"></div></div>
        <div class="case-text">与120多个行业的老板深度合作，助力企业通过短视频布局全网，提高产品询盘、转化、增加销售额</div>
        <div class="grid-container">
            <div class="grid-item" v-for="item,index in imgItem" :key="item.id" @mouseleave="caseLeave(index)" @mouseenter="caseMover(index)">
                <img style="width: 100%;height: 100%;" :src="require('@/assets/' + item.img)" alt="">
                <div class="grid-poa">
                    <span class="grid-item-text">{{ item.text }}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="choose">
        <div class="choose-title">为什么选择我们<div class="choose-line"></div></div>
        <div class="row choose-bottom">
            <div class="rol choose-item" v-for="item,index in chooseList" :key="item.index">
                <div class="choose-item-box" @mouseleave="chooseLeave(index)" @mouseenter="chooseMover(index)">
                    <img class="choose-item-img" :src="require('@/assets/' + item.img)" alt="">
                    <div class="choose-detail">{{ item.text }}</div>
                </div>
                <div class="choose-row-title">{{ item.title }}</div>
            </div>
        </div>
    </div>
</div>
</template>

<style lang='scss' scoped>
@keyframes h3-animation {
    from{
        transform: translateX(-300px);
    }to{
        transform: translateX(0);
    }
}
@keyframes img-animation {
    from{
        transform: translateY(-300px);
    }to{
        transform: translateY(0);
    }
}
@keyframes img2-animation {
    from{
        transform: translateY(300px);
    }to{
        transform: translateY(0);
    }
}
@keyframes grid-text-animation {
    from{
        transform: translateY(-100%);
    }to{
        transform: translateY(0)
    }
}
@keyframes grid-animation {
    from{
       opacity: 0;
    }to{
        opacity: 1;
    }
}
@keyframes choose-animation {
    100%{
       bottom: 0;
    }
}

    @media screen and (max-width: 1500px) {
      .col-right-img3 {
        display: none;
      }
      .bottom-item{
        font-size: 18px !important;
      }
      .grid-item{
        
      }
    }
    @media screen and (max-width: 1060px) {
      .col-right-img2 {
        display: none;
      }
      .bottom-item{
        font-size: 14px !important;
      }
    }
    @media screen and (max-width: 576px) {
      .col-right-img1 {
        display: none;
      }
      .bottom {
        display: none !important;
      }
    }
    .page{
        .top{
            width: 100%;
            min-height: 682px;
            background: linear-gradient(90deg,#fff 0%,rgb(237,243,255)100%);
            .left{
                height: 682px;
                padding: 80px 40px;
                animation: h3-animation 1s ease-in-out;
                .top-h3{
                    font-size: 62px;
                    color: rgb(48,49,51);
                    font-weight: 700;
                    text-align: left;
                    margin-bottom: 16px;
                }
                .top-p{
                    font-size: 18px;
                    color: rgb(69,70,74);
                    text-align: left;
                    
                }
                .top-flex{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    height: 89px;
                    .top-flex-item{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .top-flex-item-top{
                            font-size: 40px;
                            font-weight: 700;
                            color: rgb(48,49,51);
                        }
                        .top-flex-item-bottom{
                            font-size: 18px;
                            font-weight: 400;
                            color: rgb(144,147,153);
                        }
                    }
                }
            }
            .right{
                width: 100%;
                height: 682px;
                .col-right-img1{
                    width: 210px;
                    height: 360px;
                    border-radius: 28px;
                    margin-top: 108px;
                    margin-right: 19px;
                    animation: img-animation 1s ease-in-out;
                }
                .col-right-img2{
                    width: 210px;
                    height: 360px;
                    border-radius: 28px;
                    margin-top: 151px;
                    margin-right: 19px;
                    animation: img2-animation 1s ease-in-out;
                }
                .col-right-img3{
                    width: 210px;
                    height: 360px;
                    border-radius: 28px;
                    margin-top: 52px;
                    margin-right: 19px;
                    animation: img-animation 1s ease-in-out;
                }
            }
            .bottom{
                background-color: rgb(72,128,255);
                height: 110px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px;
                margin-left: 0;
                .bottom-item{
                    display: flex;
                    align-items: center;
                    font-size: 24px;
                    font-weight: 700;
                    color: #fff;
                    .bottom-item-img{
                        margin-right: 20px;
                    }
                }
            }
        }
        .swipe{
            display: flex;
            padding: 100px;
            width: 100%;
            height: 800px;
            background: url(../assets/home_img_gj_bg.png) no-repeat 100% 100%;
            .swipe-left{
                flex: 1;
                .swipe-left-title{
                    display: flex;
                    align-items: center;
                    font-size: 32px;
                    color: rgb(48,49,51);
                    margin-bottom: 73px;
                    .swipe-title-img{
                    width: 40px;
                    height: 40px;
                    margin-right: 12px;
                    }
                }
                .swipe-tabbar{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    justify-content: space-between;
                    height: 344px;
                    .swipe-tab-item{
                        font-size: 28px;
                        color: rgb(144,147,153);
                        cursor: pointer;
                    }
                    .tab-active{
                        font-weight: 700;
                        color: rgb(48,49,51);
                    }
                }
            }
            .swipe-right{
                flex: 4;
                padding-top:40px;
                text-align: left;
                .swipe-right-title{
                    display: block;
                    font-size:44px;
                    color: rgb(72,128,255);
                    font-weight: 700;
                    margin-bottom: 16px;
                    margin-left: 40px;
                }
                .swipe-right-text{
                    display: block;
                    font-size: 28px;
                    color: rgb(69,70,74);
                    margin-bottom: 78px;
                    margin-left: 40px;
                }
                .swipe-right-div{
                    font-size: 28px;
                    color: rgb(48,49,51);
                    margin-bottom: 30px;
                }
                .swipe-right-img{
                    width: 96%;
                    height: 350px;
                }
            }
        }

        .inset-text{
            width: 100%;
            height: 400px;
            background: url(../assets/home_img_gg01.png) no-repeat 100% 100%;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 60px;
            font-weight: 700;
            color: #fff;
            margin: 100px 0;
        }
        .case{
            width: 100%;
            height: 1197px;
            padding: 70px 40px;
            background-color: #fff;
            .case-title{
                position: relative;
                display: inline-block;
                width: 100%;
                font-size: 40px;
                color: rgb(48,49,51);
                font-weight: 700;
                margin-bottom: 16px;
                .case-line{
                    position: absolute;
                    bottom: -6px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 160px;
                    height: 8px;
                    background-color: rgb(72,128,255);
                }
            }
            .case-text{
                display: block;
                font-size: 24px;
                color: rgb(48,49,51);
                margin: 6px 0 48px;
            }
            .grid-container {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              width: 100%;
              .grid-item {
                position: relative;
                flex: 1 1 calc(33.333% - 20px);
                height: 280px;
                margin-bottom: 20px;
                margin-right: 20px;
                &:nth-child(3n){
                    margin: 0;
                }
                .grid-poa{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-color: rgba(72,128,255,0.8);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    opacity: 0;
                    color: #fff;
                    font-size: 48px;
                    font-weight: 700;
                    transition: all 0.3s;
                    cursor:pointer;
                    &:hover{
                        animation: grid-animation 0.5s forwards;
                    }
                }
                }
            }
        }
        .choose{
            margin-top: 70px;
            padding: 70px 40px;
            .choose-title{
                position: relative;
                font-size: 32px;
                font-weight: 500;
                color: rgb(48,49,51);
                margin-bottom: 90px;
                .choose-line{
                    width: 224px;
                    height: 8px;
                    position: absolute;
                    bottom: -12px;
                    left: 50%;
                    transform: translateX(-50%);
                    background-color: rgb(72,128,255);

                }
            }
            .choose-bottom{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .choose-item{
                    width: calc(25% - 20px);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .choose-item-box{
                        position: relative;
                        width: 100%;
                        height: 450px;
                        margin-right: 20px;
                        overflow: hidden;
                        border-radius: 12px;
                        &:nth-last-child(1){
                            margin: 0;
                        }
                        .choose-item-img{
                            width: 100%;
                            height: 100%;
                        }
                        .choose-detail{
                            display: flex;
                            align-items: center;
                            position: absolute;
                            bottom: -119px;
                            left: 0;
                            width: 100%;
                            height: 119px;
                            padding: 20px 16px;
                            font-size: 18px;
                            color: #fff;
                            background-color: rgb(72,128,255);
                            overflow: hidden;
                        }
                        .choose-img{
                            filter: brightness(0.8);
                        }
                    }
                    .choose-row-title{
                        font-size: 32px;
                        font-weight: 700;
                        color: rgb(72,128,255);
                        margin-top: 16px;
                    }
                }
            }
            
        }
    }
    .g-animation{
        animation: grid-text-animation 0.5s forwards;
    }
    .choose-anima{
        animation: choose-animation 0.5s forwards;
    }
</style>